<template>
  <view class="foot_body">
    <view class="left" @click="openPrice">
      <view class="top">
        <view class="o">预估</view>
        <view class="c">¥{{parseFloat(allPrice).toFixed(2)}}</view>
        <view class="d">明细^</view>
      </view>
      <view class="bottom">最终费用以值班员开单为准</view>
    </view>
    <view class="right" @click="submit">修改订单</view>
  </view>
  <nut-popup :style="{ height: '70%' }" position="bottom" :closeable="true" round v-model:visible="show">
    <view class="price_pop">
      <view class="title">费用明细</view>
      <view class="contant">
        <view class="price_header">
          <view class="m">合计费用</view>
          <view class="n">
            <view class="i">¥</view>
            <view class="j">{{parseFloat(allPrice).toFixed(2)}}</view>
          </view>
        </view>
        <view class="price_row" v-for="(item,index) in nowCostList" :key="index">
          <view class="price_left">{{item.name}}</view>
          <view class="price_right">¥{{parseFloat(item.m).toFixed(2)}}</view>
        </view>
      </view>
      <view class="foot">
        <view class="foot_body">
          <view class="left">
            <view class="top">
              <view class="o">预估</view>
              <view class="c">¥{{parseFloat(allPrice).toFixed(2)}}</view>

            </view>
            <view class="bottom">最终费用以值班员开单为准</view>
          </view>
          <view class="right" @click="submit">修改订单</view>
        </view>
      </view>

    </view>
  </nut-popup>
</template>
<script lang="ts" setup>
import { ref ,computed} from "vue";
import useSendGoodsStore from "../../store/sendGoods";
const allPrice =  computed(()=>{
  let p = 0
   sendGoodsStore.costList.forEach((item)=>{
      p = p + Number(item.m)
   })
   return String(p)
})
const nowCostList = computed(()=>{
  return sendGoodsStore.costList.filter((item)=>{
    return item.m && item.m>0
  })
})
const sendGoodsStore = useSendGoodsStore();
const show = ref<boolean>(false);
function openPrice() {
  show.value = true;
}
const emit = defineEmits<{
  (e: "submit");
}>();
function submit(){
  emit('submit')
}
</script>
<style lang="scss">
.foot {
  width: 100%;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: white;
}
.price_pop {
  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    height: 600rpx;
    width: 100%;
    overflow: auto;
    background: #f5f5f5;
    .price_row {
      width: 100%;
      height: 64rpx;
      padding: 0 120rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price_left {
        font-size:28rpx;
        color: #252525;
      }
      .price_right {
        font-size: 28px;
        color: #252525;
      }
    }
    .price_header {
      margin-top: 48rpx;
      margin-bottom: 32rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .m {
        font-size: 24rpx;
        color: #252525;
      }
      .n {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        .i {
          font-size: 44rpx;
          /* 外部/主色/蓝 */
          color: #0966ff;
        }
        .j {
          font-size: 76rpx;
          color: #0966ff;
        }
      }
    }
  }
}
.foot_body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
    justify-content: space-between;
  padding: 0 24rpx;
  box-sizing: border-box;
  .left {
    .top {
      display: flex;
      align-items: center;
      .o {
        font-size: 24rpx;

        color: #666666;
      }
      .c {
        font-size: 40rpx;
        color: #0966ff;
        margin-left: 8rpx;
        margin-right: 16rpx;
      }
      .d {
        font-size: 24rpx;

        color: #252525;
        margin-right: 24rpx;
      }
    }
    .bottom {
      font-size: 18rpx;
      color: #999999;
    }
  }
  .right {
    width: 222rpx;
    height: 88rpx;
    border-radius: 88rpx;
    background: #0966ff;
    font-size: 32rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
